{% extends 'base.html' %}

{% block content %}
<div class="row sortable ui-sortable">
  <div class="col-xs-12" data-original-title="">
    <div class="col-xs-1"><h2><i class="fa fa-gears"></i></h2></div>
    <div class="col-xs-10"><h2><span class="break"></span>Services</h2></div>
    <div class="col-xs-1 text-right">
      <h2><a href="{% url create-service %}" title="New service"><i class="glyphicon glyphicon-plus"></i></a></h2>
    </div>
  </div>
  <div class="col-xs-12">
    {% if not services %}
      No services
    {% else %}
    <table class="table bootstrap-datatable datatable">
      <thead>
        <tr>
          <th>Name</th>
          <th>Overall</th>
          <th>Active checks</th>
          <th>Disabled checks</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
      {% for service in services %}
        <tr class="{% if service.alerts_enabled %}enabled{% else %}warning{% endif %}">
          <td>
            <a href="{% url service pk=service.id %}" title="Alerts {% if service.alerts_enabled %}enabled{% else %}disabled{% endif %}">{{service.name}} </a>
          </td>
          <td>
            <span class="label label-{% if not service.alerts_enabled %}warning{% else %}{% if service.overall_status == service.PASSING_STATUS %}success{% else %}danger{% endif %}{% endif %}">{% if service.alerts_enabled %}{{ service.overall_status|lower|capfirst }}{% else %}Disabled{% endif %}</span>
          </td>
          <td>
            <span class="label label-{% if service.active_status_checks.all.count > 0 %}{% if service.overall_status != service.PASSING_STATUS %}danger{% else %}success{% endif %}{% else %}default{% endif %}">{{ service.active_status_checks.all.count }}</span>
          </td>
          <td>
            <span class="label label-{% if service.inactive_status_checks.all.count > 0 %}warning{% else %}default{% endif %}">{{ service.inactive_status_checks.all.count }}</span>
          </td>
          <td class="text-right">
            <a class="btn btn-xs" href="{% url update-service pk=service.id %}" role="button">
              <i class="glyphicon glyphicon-edit"></i>
            </a>
          </td>
        </tr>
      {% endfor %}
      </tbody>
    </table>
    {% endif %}
  </div>
</div>
{% endblock content %}

{% block js %}
{% load compress %}
{{ block.super }}
{% compress js %}
<script type="text/coffeescript">

</script>
{% endcompress %}
{% endblock js %}